<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

const initMap = () => {
  Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjhkZTEyNC03NzZjLTRjYTAtOGQ3ZS1iNzQ3YjNmMTJmMTIiLCJpZCI6MTQ3MDY0LCJpYXQiOjE2ODY4MTQxMzJ9.RHH-iBwprTK9vhaLIIeZbPQEvk47nRNbWAFpmj6Ged4'
  const viewer = new Cesium.Viewer('cesiumContainer', {
    baseLayerPicker: false, // 如果设置为false，将不会创建右上角图层按钮。
    geocoder: false, // 如果设置为false，将不会创建右上角查询(放大镜)按钮。
    navigationHelpButton: false, // 如果设置为false，则不会创建右上角帮助(问号)按钮。
    homeButton: false, // 如果设置为false，将不会创建右上角主页(房子)按钮。
    sceneModePicker: false, // 如果设置为false，将不会创建右上角投影方式控件(显示二三维切换按钮)。
    animation: false, // 如果设置为false，将不会创建左下角动画小部件。
    timeline: false, // 如果设置为false，则不会创建正下方时间轴小部件。
    fullscreenButton: false, // 如果设置为false，将不会创建右下角全屏按钮。
    scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
    shouldAnimate: false, // 默认true ，否则为 false 。此选项优先于设置 Viewer＃clockViewModel 。
    infoBox: false, // 是否显示点击要素之后显示的信息
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式。
    requestRenderMode: false, // 启用请求渲染模式。
    // 高德影像地形地图
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
    })
  })
  viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏版权信息
  // 再加上高德影像注记地图
  viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
    })
  )
  // 设置初始位置  Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)
  const boundingSphere = new Cesium.BoundingSphere(
    Cesium.Cartesian3.fromDegrees(108.95, 34.28, 100),
    15000
  )
  // 定位到初始位置
  viewer.camera.flyToBoundingSphere(boundingSphere, {
    // 定位到初始位置的过渡时间，设置成0，就没有过渡，类似一个过场的动画时长
    duration: 5
  })
}

onMounted(() => {
  initMap()
})
</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>
